<script setup name="createOrder">
import {reactive, ref} from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { useCreateOrderData } from './hooks/useCreateOrderData'
import BASE_URL from '@/utils/env'
import  { uploadFileApi } from '@/api'
const { getOneAddress, fromAddressData,toAddressData,orderFormData,handleSubmitOrder, loading,getDefaultAddress,getOrderDetail,fileList } = useCreateOrderData()

const showType = ref(false)
const actions = reactive([
  {
    text: '代拿快递',
    value: 1,
  },
  {
    text: '代取餐品',
    value: 2,
  },
  {
    text: '代买零食',
    value: 3,
  },
  {
    text: '代送鲜花',
    value: 4,
  },
])
let addressQuery = reactive({
  type: 'from',
  fromAddressId: 0,
  toAddressId: toAddressData.value?.id
})
onLoad((options) => {
  addressQuery = options
  getDefaultAddress()
  if(options.orderId && options.orderId !== 'null') {
    uni.setNavigationBarTitle({
      title: '修改订单'
    })
    getOrderDetail(options.orderId)
  }
  if(options.type) {
    if(options.fromAddressId !== '0') {
      orderFormData.takeAddressId = options.fromAddressId
      getOneAddress(options.fromAddressId, 'from')
    }
    if(options.toAddressId !== '0') {
      getOneAddress(options.toAddressId, 'to')
      orderFormData.receiveAddressId = options.toAddressId
    }
  }
})
function handleTypeSelect(item) {
  orderFormData.typeId = item.value
  orderFormData.typeName = item.name
}

const afterRead = async event => {
  let file = event.file;
  const fileNmae = await uploadFileApi (file.url,'order');
  orderFormData.picture = fileNmae
  fileList.value = [{url: `${BASE_URL}images/${fileNmae}`}]
}
const handleDeleteImage = () => {
  fileList.value.length = 0
}
const handleToAddressList = type  => {
  addressQuery.type = type
  uni.navigateTo({ url: `/pages/address/address?type=${type}&fromAddressId=${addressQuery.fromAddressId || 0}&toAddressId=${addressQuery.toAddressId || 0}&orderId=${addressQuery?.orderId || null}`
  })
}
const handleChangeType = id => {
  orderFormData.typeName = actions.find(item => item.value === id).text
}
</script>


<template>
  <view class="create-order-container">
    <uni-section class="address-item" title="取货地址" type="line">
      <view  @click="() => handleToAddressList('from')">
         <blockquote v-if="fromAddressData?.id">
           <view class="address-detail">{{ fromAddressData.provinceName + fromAddressData?.address }}</view>
           <view class="user-info">
             <text >{{ fromAddressData?.name }}</text>
             <text class="user-phone">{{ fromAddressData?.phone }}</text>
           </view>
         </blockquote>
        <text v-else  class="default_text">请选择取货地址</text>
      </view>
    </uni-section>
    <uni-section class="address-item" title="收货货地址" type="line">
      <view  @click="() => handleToAddressList('to')">
        <view  @click="() => handleToAddressList('to')">
          <blockquote v-if="toAddressData?.id">
            <view class="address-detail">{{ toAddressData.provinceName +  toAddressData?.address }}</view>
            <view class="user-info">
              <text >{{ toAddressData?.name }}</text>
              <text class="user-phone">{{ toAddressData?.phone }}</text>
            </view>
          </blockquote>
          <text v-else  class="default_text">请选择收货地址</text>
        </view>
      </view>
    </uni-section>
    <uni-section title="基本信息" type="line">
      <!-- 基础用法，不包含校验规则 -->
      <uni-forms label-position="top" label-width="120" ref="baseForm" :modelValue="orderFormData">
        <uni-forms-item label="物品名称" required>
          <uni-easyinput v-model="orderFormData.goodsName" placeholder="" />
        </uni-forms-item>
        <uni-forms-item label="重量(kg)">
          <uni-easyinput type="number" v-model="orderFormData.weight" placeholder="请输入重量" />
        </uni-forms-item>
        <uni-forms-item label="类型" required>
          <uni-data-select @change="handleChangeType" v-model="orderFormData.typeId" :localdata="actions"
          ></uni-data-select>
        </uni-forms-item>
        <uni-forms-item required label="小费(元)">
          <uni-easyinput type="number" v-model="orderFormData.tips" placeholder="请输入重量" />
        </uni-forms-item>
        <uni-forms-item label="图片">
          <up-upload
              :fileList="fileList"
              @afterRead="afterRead"
              :maxCount="1"
              @delete="handleDeleteImage"
          />
        </uni-forms-item>
        <uni-forms-item label="描述信息" >
          <uni-easyinput v-model="orderFormData.description" placeholder="" />
        </uni-forms-item>
        <uni-forms-item label="备注" >
          <uni-easyinput type="textarea" v-model="orderFormData.remark" placeholder="" />
        </uni-forms-item>
      </uni-forms>
    </uni-section>
  </view>
  <view class="addBtn">
    <up-button class="btn" :loading="loading" @click="handleSubmitOrder" type="primary">提交</up-button>
  </view>
</template>

<style lang="scss" scoped>
uni-page-body {
  background-color: $u-primary-light;
}

:deep(.uni-page-head-btn) {
  display: block !important;
}
:deep(.uni-section-content) {
  padding: 10px;
}
:deep(.uni-forms-item) {
  margin-bottom: 15rpx !important;
}
:deep(.uni-forms-item__label) {
  padding-bottom: unset !important;
}
:deep(.uni-section-header) {
  padding-bottom: unset !important;
}
.create-order-container {
  padding-bottom: 170rpx;
  .address-item {
    margin-bottom: 20rpx;
    .default_text {
      color: $uni-text-color-grey;
    }
    .address-detail {
      font-size: 35rpx;
    }
    .user-info {
      color: $uni-text-color-grey;
      margin-top: 15rpx;
      font-size: 28rpx;
      .user-phone {
        margin-left: 25rpx;
      }
    }
  }
}
.addBtn {
  width: 100%;
  height: 150rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10rpx;
  box-sizing: border-box;
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  .btn {
    width: 100%;
    //background-color: #00aaff;
    color: #fff;
    border-radius: 40rpx;
  }
}
</style>
